<template>
    <div>
        <el-row :gutter="10">
            <el-col :span="8">
                <el-input v-model.trim="keyword.name" prefix-icon="fa fa-search" placeholder="查询菜单名称"
                          v-permission="'system:menu:list'"
                          @keyup.enter.native="initMenu"></el-input>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" icon="fa fa-search" @click="initMenu" v-permission="'system:menu:list'"> 搜 索
                </el-button>
            </el-col>
            <el-col :span="1">
                <el-button type="warning" icon="fa fa-refresh"
                           v-permission="'system:menu:list'"
                           @click="initMenu">
                </el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table width="100%" border :data="page.row">
                    <el-table-column prop="name" sortable label="菜单名" align="center"></el-table-column>
                    <el-table-column prop="icon" label="图标" align="center">
                        <template slot-scope="scope">
                            <i v-if="scope.row.icon" :class="scope.row.icon"></i>
                            <el-tag v-else type="info">按 钮 无 图 标</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" label="类型" align="center"
                                     :filters="[{ text: '目录', value: 0 }, { text: '菜单', value: 1 },{text: '按钮' , value : 2}]"
                                     :filter-method="filterType"
                    >
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.type !== undefined && scope.row.type === 0 " type="danger"> 目录
                            </el-tag>
                            <el-tag v-if="scope.row.type && scope.row.type === 1 " type="warning"> 菜单</el-tag>
                            <el-tag v-if="scope.row.type && scope.row.type === 2 " type="success"> 按钮</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="keepAlive" label="缓存" align="center"
                                     :filters="[{ text: '缓存', value: true }, { text: '不缓存', value: false }]"
                                     :filter-method="filterTag"
                    >
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.keepAlive"> 缓存</el-tag>
                            <el-tag v-else type="info"> 不缓存</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="orderNum" label="顺序" align="center"></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click="handleEdit(scope.row)" icon="fa fa-pencil"
                                       v-permission="'system:menu:update'"> 修 改
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="22">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.current"
                        :page-sizes="[10, 20, 30, 50]"
                        :page-size="pagination.size"
                        layout="total, sizes, prev, pager, next"
                        :total="page.total">
                </el-pagination>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-dialog
                        title="修改菜单"
                        :visible.sync="centerDialogVisible"
                        width="30%"
                        center
                        v-permission="'system:menu:update'"
                >
                    <el-dialog
                            width="60%"
                            title="图标"
                            center
                            :visible.sync="innerVisible"
                            append-to-body>
                        <i :class="item.class" v-for="item in icon" :key="item.class"
                           @click="updateIcon(item.class)"></i>
                    </el-dialog>
                    <el-form ref="form" :model="editMenu" label-width="80px">
                        <el-form-item label="菜单名" label-width="80px">
                            <el-input v-model="editMenu.name" placeholder="菜单名称"></el-input>
                        </el-form-item>
                        <el-form-item label="图标" label-width="80px">
                            <el-input v-model="editMenu.icon"
                                      :prefix-icon="editMenu.icon"
                                      @focus="innerVisible = true"
                                      placeholder="菜单图标"
                                      clearable
                            ></el-input>
                        </el-form-item>
                        <el-form-item label-width="80px">
                            <el-switch
                                    v-model="editMenu.keepAlive"
                                    active-text="缓存"
                                    inactive-text="不缓存"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                            >
                            </el-switch>
                        </el-form-item>
                        <el-form-item label="顺序" label-width="80px">
                            <el-input v-model="editMenu.orderNum" :prefix-icon="editMenu.orderNum"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="centerDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="updateMenu">确 定</el-button>
                    </span>
                </el-dialog>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {page, updateMenu} from "../../../api/modules/system/menu";
    import fontAwesome from "../../../utils/icon-js/font-awesome";
    import elementIcon from "../../../utils/icon-js/element-ui";
    import {refreshPage} from "../../../config/constant/message-Info";

    export default {
        name: 'SystemMenu',

        data() {
            return {
                icon: [...elementIcon, ...fontAwesome],
                keyword: {
                    name: ""
                },
                pagination: {
                    current: 1,
                    size: 10
                },
                page: {
                    row: [],
                    total: 0
                },
                editMenu: {
                    "id": 0,
                    "icon": "",
                    "keepAlive": true,
                    "name": "",
                    "orderNum": 0,
                    "type": 0
                },
                centerDialogVisible: false,
                innerVisible: false
            };
        },

        methods: {
            initMenu() {
                page(this.pagination, this.keyword).then(response => {
                    this.page.row = response.row;
                    this.page.total = response.total;
                })
            },
            updateMenu() {
                updateMenu(this.editMenu).then(response => {
                    this.initMenu();
                    this.centerDialogVisible = false;
                    this.$notify.success({
                        title: refreshPage,
                        message: refreshPage
                    });
                })
            },
            updateIcon(iconName) {
                this.editMenu.icon = iconName;
                this.innerVisible = false;
            },
            filterTag(value, row) {
                return row.keepAlive === value;
            },
            filterType(value, row) {
                return row.type === value;
            },
            handleEdit(row) {
                Object.assign(this.editMenu, row);
                this.centerDialogVisible = true;
            },
            handleSizeChange(size) {
                this.pagination.size = size;
                this.initMenu();
            },
            handleCurrentChange(current) {
                this.pagination.current = current;
                this.initMenu();
            }
        },
        mounted() {
            this.initMenu();
        },
        watch: {
            keyword: {
                deep: true,
                handler() {
                    this.pagination.current = 1
                }
            }
        }
    }
</script>

<style scoped>
    i {
        font-size: 24px;
    }

    .el-dialog__body i {
        cursor: pointer;
        padding: 10px;
    }
</style>